<template>
  <div class="container">
    <MainNavBar>
      <template #goBack>
        <div class="home-nav-icon" @click="goBack">
          <i class="iconfont icon-jiantou"></i>
        </div>
      </template>
      <template #center-name> 我的视频 </template>
    </MainNavBar>
    <div class="main">
      <div class="item" v-for="(item,index) in payList" :key="index" @click="goMyVideo(item)">
        <div class="top">全国首届体操同级比赛</div>
        <div class="middle">
          <div class="left">
            <span class="level-img">
              <img src="../../assets/images/level.png" alt="" />
            </span>
            <span class="level">{{item.level}}级</span>
          </div>
          <div class="right">
            <span>已付款</span>
            <span>￥</span>
            <span>{{item.order_price}}</span>
          </div>
        </div>
        <div class="bottom">
           付款时间：
           <span>{{getPayDate(item.pay_time)}}</span>
            <!-- <span>2021/05/01</span>
            <span>12:33:12</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { onBeforeRouteLeave, useRouter } from "vue-router";
import { onMounted } from '@vue/runtime-core';
import {request} from "@/network/request"
import { Toast } from 'vant';
import {ref} from "vue"
export default {
  components: {
    MainNavBar,
  },
  setup() {
    const router = useRouter();
    // 获取支付时间
    function getPayDate(date){
      if(!date)return ""
      return new Date(date*1000).toLocaleString();
      // return .replace(/:\d{1,2}$/,' ');
    }
    function goBack() {
      router.go(-1);
    }
    // 获取支付详情
    const payList = ref([])
    async function getData(){
      const res = await  request({
        url:"v1/ucenter/video_list",
        data:{
          token:sessionStorage.getItem("token")
        }
      })
      if(res.code != 200){
        Toast(res.msg)
      }else{
        // console.log(res.data.rows);
        payList.value = res.data.rows
      }
    }
    function goMyVideo(item){
      let path = "/Level3up";
      if(item.level == 2){
          path = "/actionDetail"
      }
      router.push({
        path,
        query:{
          compet_id:1,
          level_id:item.level,
          id:item.level
        }
      })
    }

    onMounted(()=>{
      getData()
    })
    return { goBack,payList,getPayDate,goMyVideo };
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: calc(100vh - 13.333vw);
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  background-repeat: repeat;
  background-color: #0054a6;
  // background-size: cover;
  background-size: 100% auto;
  position: relative;
  overflow: hidden;
  .main {
    width: 88.533vw;
    margin: 0 auto;
    padding-top: 31.999px ;
    box-sizing: border-box;
    height: calc(100vh - 13.333vw);
    overflow: scroll;
    .item {
      width: 100%;
      height: 32vw;
      background-color: #fff;
      border-radius: 10px;
      -webkit-appearance: none;
      margin-bottom: 5.333vw;
      overflow: hidden;
      .top {
        margin: 6.4vw 0 2.667vw 0;
        font-size: 4.267vw;
        font-weight: 600;
        color: #0a2463;
        height: 5.333vw;
        width: 100%;
        border-left: 0.533vw solid #0a2463;
        box-sizing: border-box;
        padding-left: 4vw;
      }
      .middle {
        width: 80vw;
        margin: 0 auto;
        height: 6.667vw;
        display: flex;
        justify-content: space-between;
        margin-bottom:4vw;
        .right{
            span:nth-child(1){
                font-size: 3.2vw;
                margin-right: 1.333vw;
            }
            span:nth-child(2){
                font-size: 3.467vw;
                font-weight: 600;
            }
            span:nth-child(3){font-size: 3.2vw;}
                
                
        }
        .left {
        height: 6.667vw;
        line-height: 6.667vw;
        display: flex;
        align-items: center;
        span{
            display: inline-block;
        }.level{
            font-size: 3.2vw;
            font-weight: 400;
        }
          .level-img {
            width: 6.667vw;
            height: 100%;
            background-color: #f9f9f9;
            border-radius: 50%;
            -webkit-appearance: none;
            overflow: hidden;
            margin-right: 2.133vw;
            img {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
      }
      .bottom{
          width: 80vw;
          margin: 0 auto;
          font-size: 3.2vw;
          color: #ced3e0;
          span{
              margin-right: 2.667vw;
          }
      }
    }
  }
}
</style>